<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'createSelectorQuery'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-movable-area>
				<onekit-movable-view onekit-class="target" :x="x" :y="y" direction="all" @Change="getNodeInfo">Drag</onekit-movable-view>
			</onekit-movable-area>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="metric">
				<onekit-view v-for="item in metrics" :key="item.key">
					<onekit-text onekit-class="b">{{ item.key }}</onekit-text>
					<onekit-text onekit-class="span">{{ item.val }}</onekit-text>
				</onekit-view>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "获取WXML节点信息",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["x","y","metrics"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'获取WXML节点信息',
        "path":'packageAPI/pages/get-wxml-node-info/get-wxml-node-info'
};
    },
    "data":{
        "metrics":[
        ]
},
    "onReady"(){
      this.getNodeInfo();
    },
    "getNodeInfo"(){
      const $ = wx.createSelectorQuery();
      const target = $.select('.target');
      target.boundingClientRect();
      $.exec((res)=>{
      const rect = res[0];
      if(rect)
        {
          const metrics = [
          ];
          for(const key in rect){
              if((key !== 'id') && key !== 'dataset')
                {
                  const val = rect[key];
                  metrics.push({
                      key,
                      val
});
                }
            };
          this.setData({
              metrics
});
        };
    });
    }
});

</script>
<style 
 lang="css">
.onekit-movable-view {
  display: flex ;
  align-items: center ;
  justify-content: center ;
  height: 50px ;
  width: 50px ;
  background: #1AAD19 ;
  color: #fff ;
}
.onekit-movable-area {
  height: 200px ;
  width: 200px ;
  background-color: #ccc ;
  overflow: hidden ;
}
.page-section {
  display: flex ;
  justify-content: center ;
}
.page-body {
  display: flex ;
  flex-direction: column ;
  align-items: center ;
}
.metric {
  width: 200px ;
  display: flex ;
  justify-content: center ;
  flex-direction:column ;
  align-items:center ;
}
.b {
  display: inline-block ;
  width: 75px ;
  font-weight: bold ;
}
.span {
  display: inline-block ;
  width: 50px ;
}
</style>